<template>
	<div class="login_container">
		<div class="box">
			<div class="login_form">
				<el-form
					label-width="0px"
					:model="denglu"
					:rules="loginRules"
					ref="loginFormRef"
				>
					<!-- 用户名 -->
					<el-form-item prop="username">
						<el-input
							prefix-icon="iconfont icon-user"
							v-model="denglu.username"
							v-on:keyup.enter.native="login"
						></el-input>
					</el-form-item>
					<!-- 密码 -->
					<el-form-item prop="password">
						<el-input
							prefix-icon="iconfont icon-3702mima"
							v-model="denglu.password"
							type="password"
							@keyup.enter.native="login"
						></el-input>
					</el-form-item>
					<!-- 提交 -->
					<div class="btns">
						<el-button type="primary" @click="login"
							>登录</el-button
						>
						<el-button type="info" @click="resetLoginFormRef"
							>重置</el-button
						>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
export default {
    name: 'loginPage',
	data() {
		return {
			denglu: {
				username: '',
				password: '',
			},
			loginRules: {
				username: [
					{
						required: true,
						message: '请输入登录名称',
						trigger: 'blur',
					},
					
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
				
				],
			},
		}
	},
    created(){
        window.sessionStorage.removeItem('userInfo')
    },
	methods: {
		resetLoginFormRef: function () {
			this.$refs.loginFormRef.resetFields()
		},
		login: function () {
			this.$refs.loginFormRef.validate(async (valid) => {
				if (!valid) return
				const { data: res } = await this.$http.post('/user/login',this.$formDataFilter(this.denglu) )
				console.error(res);
				if (res.data) {
                    this.$message.success('登陆成功')
                    window.sessionStorage.setItem('userInfo', JSON.stringify(res.data))
				this.$emit('push','manage')
				} else  {
                    this.$message.error('登陆失败');
				}
				
			})
		},
		fun: function () {
			console.log(111)
		},
	},
}
</script>

<style  scoped>
.login_container {
	/* background-color: #2b4b6b; */
	height: 100%;
}
.box {
	width: 100%;
    height: 15rem;
    position: absolute;
    border-radius: 3px;
    left: 0;
    top: 0;
    background-color: #fff;
}

.login_form {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.btns {
	display: flex;
	justify-content: flex-end;
}
</style>
